<template lang="html">
  <div id="detail-wrap">
    <!-- 轮播图 -->
    <section class="detail-banner">
      <div class="person_vr" style="position: relative;">
        <swiper  :list="images" dots-position="center" height="280px" :show-desc-mask="false" auto></swiper>
        <div class="rental-look" @click="lookVr(vrUrl)" v-if="vrUrl">
          <img :src="lookVrImg" alt="">
        </div>
      </div>
      <section class="figcaption pad-side-15">
        <div class="detail-title-wrap">
          <h3 class="detail-title line-height-135">{{houseTitle}}</h3>
          <span class="detail-price line-height-135" v-if="rentalPrice">￥{{rentalPrice}}/月</span>
          <p class='detail-logo'><img src="../../images/rent/baologo.png" alt=""> 保障：100%真实房源</p>
          <p class="detail-tag line-height-135" v-if="highlights.length > 0">
            <span v-if="isFreebet" class="m-noprice">诚信免押</span>
            <span v-for="(highlight, index) in highlights" :key="index">{{highlight}}</span>
          </p>
        </div>
        <div class="detail-btns">
          <div class="detail-btn attention-btn">
            <!-- 已关注 -->
            <i class="click-extend" @click="cancelConcern" v-if="isAttention">
              <img src="../../images/rent/detail_ygz.png">
            </i>
            <!-- 未关注 -->
            <i class="click-extend" @click="concern" v-else>
              <img src="../../images/rent/detail_wgz.png">
            </i>
          </div>
        </div>
      </section>
    </section>
    <!-- 公寓信息 -->
    <section class="detail-infos pad-side-15" v-if="layoutHall || layoutRoom || layoutToilet">
      <div class="info-cell">
        <p class="info-content">
          <span v-if="layoutRoom !== 0">{{layoutRoom}}室</span><span v-if="layoutHall !== 0">{{layoutHall}}厅</span><span v-if="layoutToilet !== 0">{{layoutToilet}}卫</span>
        </p>
      </div>
      <div class="info-cell" v-if="area">
        <p class="info-content">{{area}}m²</p>
      </div>
    </section>
    <!-- 公寓地址 -->
    <!-- <section class="detail-address" v-if="address" @click="$router.push({path: '/houseMap', query:{lat, lng}})"> -->
    <!-- <section class="detail-address" v-if="address">
      <group>
        <cell :title="`${address} ${communityName}`" is-link>
          <img slot="icon" class="location" width="20" src="../../images/rent/detail_wz.png">
        </cell>
      </group>
    </section> -->
    <!-- 房源详情 -->
    <section class="housing-section">
      <p class="housing-title">房屋介绍</p>
      <!-- 房源信息 -->
      <div class="housing-table">
        <p class="housing-item" v-if="type">类型：<span>{{type}}</span></p>
        <p class="housing-item" v-if="years">年代：<span>{{years}}年</span></p>
        <p class="housing-item" v-if="direct">朝向：<span>{{direct}}</span></p>
        <p class="housing-item" v-if="floor">楼层：<span>{{floor}}</span></p>
        <p class="housing-item" v-if="decoration">装修：<span>{{decoration}}</span></p>
        <p class="housing-item" v-if="isCarport">车位：<span>{{isCarport === 1 ? '有' : '无'}}</span></p>
        <p class="housing-item" v-if="outManner">方式：<span>{{outManner}}</span></p>
        <p class="housing-item" v-if="createTime">发布：<span>{{createTime}}</span></p>
        <p class="housing-item" v-if="isLift">电梯：<span>{{isLift === 1 ? '有' : '无'}}</span></p>
        <!-- <p class="housing-item" v-if="isLift">供暖：<span>{{isLift}}</span></p>
        <p class="housing-item" v-if="isLift">租期：<span>{{isLift}}</span></p>
        <p class="housing-item" v-if="isLift">入住：<span>{{isLift}}</span></p> -->
        <p class="housing-item width-100" v-if="serialNo">编号：<span>{{serialNo}}</span></p>
        <p class="housing-item width-100" v-if="communityName">小区：<span style="">{{communityName}}</span></p>
        <!-- <p class="housing-item width-100" v-if="communityName">小区：<span style="color: #ff9600;" @click="skip">{{communityName}}</span></p> -->
      </div>
    </section>
    <!-- 位置信息 -->
    <section class="housing-section" v-if="lat && lng">
      <p class="housing-title">位置信息</p>
      <div class="houseMap" @click="$router.push({path: '/houseMap', query:{lat, lng}})">
        <house-map :lat="lat" :lng="lng"></house-map>
      </div>
    </section>
    <!-- 独用设施 -->
    <section class="housing-section" v-if="configuration.length > 0">
      <p class="housing-title">独用设施</p>
      <div class="housing-table">
        <p class="housing-item width-33" v-for="(config, index) in configuration">{{config}}</p>
      </div>
    </section>
    <!-- 房源介绍 -->
    <section class="housing-section" v-if="facility">
      <p class="housing-title">房源介绍</p>
      <p class="housing-intro">{{facility}}</p>
    </section>
    <section class="housing-section" v-if="facility">
      <p class="housing-title">提醒</p>
      <ol>
        <li>租赁企业和出租人简介、房源信息具体说明等信息由住房租赁企业和出租人提供并发布；</li>
        <li>平台提供的各种信息及资料仅供参考，承租人应依其独立判断作出决策，平台不属于住房租赁活动参与方，不承担因双方自行选择住房租赁产生的任何责任。</li>
      </ol>
    </section>

    <section class="housing-link">
      <group>
        <!-- <cell title="房租太贵了？" value="发起找人合租" is-link></cell> -->
        <!-- <cell title="房源信息有误？" value="我要举报" is-link @click.native="report"></cell> -->
      </group>
    </section>
    <!-- 不可租状态 -->
    <div class="disable_rent" v-if="!houseStatus.act">{{houseStatus.txt}}</div>
    <!-- 联系房东 -->
    <div class="contact" @click="contactLandlor" v-if="showOperationBtn"></div>
    <section class="detail-foot" v-if="showOperationBtn && houseStatus.act">
      <div class="foot-bar">
        <div class="foot-btn border-top" @click.stop="appointment">
          <p>预约看房</p>
        </div>
        <div class="foot-btn sign-btn" @click.stop="infoConfirm">
          <p class="sign">我要签约</p>
        </div>
      </div>
    </section>
    <section v-if="showDialog" @touchmove.prevent="">
      <appoint-dialog v-model="showDialog" :createUserId="getUserId()" :houseId="houseId" :landlordId="landlordId"></appoint-dialog>
    </section>
    <report-dialog :showReport="showReport" @hide="showReport = false" :data="reportData"></report-dialog>
  </div>
</template>

<script>
import { Swiper, Cell } from 'vux'
import AppointDialog from './child/AppointDialog'
import HouseMap from './houseMap'
import ReportDialog from './child/ReportDialog'
export default {
  components: {
    Swiper,
    Cell,
    AppointDialog,
    HouseMap,
    ReportDialog
  },
  computed: {
    // 显示操作按钮(联系房东、预约看房、我要签约)
    // 房东查看自己的房源时隐藏操作按钮
    // 已预订的房源也隐藏操作按钮
    showOperationBtn: {
      get: function () {
        return this.isTenant && (this.status === 1000) && !this.hasSigned
      },
      set: function () {}
    }
  },
  data () {
    return {
      showReport: false, // 举报弹窗
      houseStatus: {
        txt: '',
        act: true
      },
      lookVrImg: require('@/images/look.png'),
      reportData: { // 举报数据
        trueName: '', // 姓名
        mobile: '', // 手机
        idCard: '', // 身份证
        landlordname: '', // 房东姓名
        landlordMobile: '', // 房东手机
        htitle: '', // 房源标题
        type: '1' // 房源类型 个人房源
      },
      houseId: '', // 房源id
      houseTitle: '', // 房源标题
      coverImg: '', // 封面图
      address: '', // 房源地址
      outManner: '', // 出租方式
      rentalPrice: '', // 租金
      highlights: [], // 标签
      area: '', // 面积
      layoutHall: '', // 格局(厅)
      layoutRoom: '', // 格局(室)
      layoutToilet: '', // 格局(卫)
      lat: '', // 纬度
      lng: '', // 经度
      configuration: [], // 独用设施
      direct: '', // 朝向
      decoration: '', // 装修
      floor: '', // 楼层
      type: '', // 类型
      years: '', // 年代
      isLift: '', // 电梯
      isFreebet: '', // 是否免押
      createTime: '', // 发布时间
      isCarport: '', // 车位
      communityName: '', // 小区
      serialNo: '', // 编号
      isAttention: false, // 是否关注
      facility: '', // 房源介绍
      images: [], // 轮播图数据
      vrUrl: '',
      landlordId: '', // 房东id
      landlordname: '', // 房东姓名
      mobile: '', // 房东电话
      betPrice: '', // 押金
      betNum: '', // 押金方式
      showDialog: false,
      virtualNum: '', // 虚拟电话
      isTenant: false, // 是否是租客
      currentUserId: '', // 登录用户id
      status: 1003, // 已预约
      userInfo: {}, // 用户信息
      hasSigned: false, // 已签约
      typeNun: 1 // 关注的房屋类型
    }
  },
  methods: {
    lookVr (vrUrl) {
      window.location.href = vrUrl
    },
    status2txt (status) {
      if (status === 1111) this.houseStatus = {txt: '待审核', act: false}
      else if (status === 1001) this.houseStatus = {txt: '不可租', act: false}
      else if (status === 1002) this.houseStatus = {txt: '租赁中', act: false}
      else if (status === 1003) this.houseStatus = {txt: '已预定', act: false}
      else if (status === 1004) this.houseStatus = {txt: '已下架', act: false}
      else this.houseStatus = {txt: '', act: true}
    },
    // 关注房源
    concern () {
      if (this.currentUserId) {
        this.$axiosPosting(this.$api.concernHouse, {houseId: this.houseId, type: this.typeNun}).then(res => {
          if (res.code === '0000') {
            if (this.isAttention === true) {
              this.isAttention = false
            } else if (this.isAttention === false) {
              this.$vux.toast.text('关注成功')
              this.isAttention = true
            }
          } else {
            this.$vux.toast.text(res.msg)
          }
        })
      } else {
        this.$router.push('/login')
      }
    },
    getUserId () {
      let id = JSON.parse(localStorage.getItem('userInfo')).id
      id = id ? id.toString() : ''
      return id
    },
    // 取消关注房源
    cancelConcern () {
      if (this.currentUserId) {
        this.$axiosPosting(this.$api.cancleConcernHouse, {houseId: this.houseId, type: this.typeNun}).then(res => {
          if (res.code === '0000') {
            if (this.isAttention === true) {
              this.isAttention = false
              this.$vux.toast.text('已取消关注')
            } else if (this.isAttention === false) {
              this.isAttention = true
              this.$vux.toast.text('关注成功')
            }
          } else {
            this.$vux.toast.text(res.msg)
          }
        })
      } else {
        this.$router.push('/login')
      }
    },
    // 预约看房
    appointment () {
      if (this.currentUserId) {
        this.showDialog = true
      } else {
        this.$router.push('/login')
      }
    },
    skip () {
      this.$router.push({path: '/communityDetail', query: {key: this.communityName}})
    },
    // 信息确认
    infoConfirm () {
      this.$axiosPosting(this.$api.gotoSign, {id: this.$route.query.id}).then(res => {
        if (res.code === '0000') {
          if (this.currentUserId) {
            let houseInfo = {
              houseId: this.houseId, // 房源id
              houseTitle: this.houseTitle, // 房源标题
              address: this.address, // 地址
              highlights: this.highlights.join(','), // 亮点
              area: this.area, // 面积
              rentalPrice: this.rentalPrice, // 价格
              partyAId: this.landlordId, // 房东id
              coverImg: this.coverImg, // 封面图
              betPrice: this.betPrice, // 押金
              betNum: this.betNum, // 押金方式
              createTime: this.createTime // 发布时间
            }
            window.localStorage.setItem('signHouseInfo', JSON.stringify(houseInfo))
            this.$router.push({ path: '/infoConfirm' })
          } else {
            this.$router.push('/login')
          }
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    // 联系房东
    contactLandlor () {
      let userInfo = JSON.parse(window.localStorage.getItem('userInfo') || '{}')
      let mobileFor = userInfo.mobile || ''
      if (mobileFor) {
        window.location.href = `tel:${this.mobile}`
        // if (this.virtualNum === '') {
        //   this.$axiosPosting(this.$api.getVirtualNum, {mobileFor, mobileTo: this.mobile}).then(res => {
        //     let data = ''
        //     if (res.code === '0000') {
        //       data = JSON.parse(res.data)
        //     }
        //     if (res.code === '0000' && data.errorCode === '0') {
        //       this.virtualNum = data.virtualNum
        //       window.location.href = `tel:${this.virtualNum}`
        //     } else {
        //       this.$vux.toast.text('无法获取房东电话')
        //       this.virtualNum = ''
        //     }
        //   })
        // } else {
        //   window.location.href = `tel:${this.virtualNum}`
        // }
      } else {
        this.$router.replace('/login')
      }
    },
    // 举报
    report () {
      if (this.currentUserId) {
        if (this.userInfo.idCard) {
          this.reportData = {
            trueName: this.userInfo.trueName, // 姓名
            mobile: this.userInfo.mobile, // 手机
            idCard: this.userInfo.idCard, // 身份证
            landlordname: this.landlordname, // 房东姓名
            landlordMobile: this.mobile, // 房东手机
            htitle: this.houseTitle, // 房源标题
            type: '1'
          }
          this.showReport = true
        } else {
          this.$router.push('/certify') // 实名认证
        }
      } else {
        this.$router.push('/login') // 登录
      }
    }
  },
  created () {
    this.userInfo = JSON.parse(window.localStorage.getItem('userInfo') || '{}')
    let id = this.$route.query.id + ''
    if (id === 'undefined' || id === '') {
      return false
    }
    // let id = '25'
    this.$axiosPosting(this.$api.getHousePersonsDetailById, {id, type: this.typeNun}).then(res => {
      if (res.code === '0000') {
        this.houseId = res.data.id // 房源Id
        this.coverImg = res.data.coverImg // 封面图
        let images = res.data.images.split(',')
        let imagesObjArr = []
        images.map(item => {
          imagesObjArr.push({
            url: 'javascript:',
            img: item + '?imageView2/0/h/560'
          })
        })
        this.status2txt(res.data.status)
        this.images = imagesObjArr
        this.vrUrl = res.data.vrUrl // vr看房地址
        this.houseTitle = res.data.houseTitle // 标题
        this.outManner = res.data.outManner // 出租方式
        this.rentalPrice = res.data.rentalPrice // 租金
        this.address = res.data.address || '' // 地址
        this.highlights = res.data.highlights ? res.data.highlights.split(',') : [] // 标签
        this.area = res.data.area // 面积
        this.layoutHall = res.data.layoutHall // 格局(厅)
        this.layoutRoom = res.data.layoutRoom // 格局(室)
        this.layoutToilet = res.data.layoutToilet // 格局(卫)
        this.lat = res.data.latitude // 纬度
        this.lng = res.data.longitude // 经度
        this.configuration = res.data.configuration ? res.data.configuration.split(',') : [] // 独用设施
        this.direct = res.data.direct // 朝向
        this.decoration = res.data.decoration // 装修
        this.floor = res.data.floor // 楼层
        this.years = res.data.years // 年代
        this.type = res.data.type // 类型
        this.isFreebet = res.data.isFreebet // 是否免押
        this.isCarport = res.data.isCarport || '无' // 车位
        this.isLift = res.data.isLift // 电梯
        this.serialNo = res.data.serialNo // 编号
        this.facility = res.data.facility // 房源介绍
        this.createTime = res.data.createTime ? res.data.createTime.slice(0, 10) : '' // 电梯
        this.communityName = res.data.communityName // 小区
        this.isAttention = res.data.isAttention === 1 // 是否关注
        this.landlordId = res.data.userId // 房东id
        this.betPrice = res.data.betPrice // 押金
        this.betNum = res.data.betNum // 押金方式
        let userId = JSON.parse(window.localStorage.getItem('userInfo') || '{}').id // 登录用户id
        this.currentUserId = userId
        this.isTenant = res.data.userId !== userId
        this.status = res.data.status || 1003
        this.hasSigned = res.data.hasSigned || false
        // 获取房东信息
        this.$axiosPosting(this.$api.getUserById, {userId: this.landlordId, type: this.typeNun}).then(res => {
          if (res.code === '0000') {
            this.mobile = res.data.mobile
            this.landlordname = res.data.trueName
          }
        })
      } else {
        this.$vux.toast.text(res.msg)
      }
    })
  }
}
</script>

<style lang="less" scoped>
  @import "../../styles/baseVar.less";
  .rental-look{
    position: absolute;
    top:215px;
    right:15px;
    // background:white;
    opacity: .7;
    width:50px;
    height:50px;
    border-radius: 50%;
    img{
      width:100%;
      height:100%;
      object-fit: cover;
    }
  }
  .disable_rent {
    justify-content: space-between;
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45px;
    line-height: 45px;
    background: #ff9600;
    color: white;
    font-size: 19px;
  }
  #detail-wrap{
    background: #f4f4f4;
    .icon{
      display: inline-block;
    }
    .pad-side-15{
      padding: 0 15px;
    }
    .detail-banner{
      background: #fff;
    }
    .housing-section{
      padding: 25px 15px;
      background: #fff;
      // margin-bottom: 6px
      border-bottom: 1px solid #f4f4f4;
      &:last-of-type{
        margin-bottom: 0;
      }
      &>ol>li {
        color: #777;
      }
    }
    .figcaption{
      padding-top: 10px;
      padding-bottom: 10px;
      display: flex;
      border-bottom: 1px solid #f4f4f4;
      .detail-title-wrap{
        .line-height-135{
          line-height: 1.35;
        }
        .detail-title{
          margin: 15px 0 7px 0;
          width: 12.50rem; /* 500/40 */
          font-size: 20px; /* 38/40 */
          color: #000;
          font-weight: normal;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          // white-space: nowrap;
          overflow: hidden;
          word-break: break-all;
          font-weight: bold;
        }
        .detail-price{
          font-size: 23px;
          font-weight: bold;
          color: #ff3c00;
        }
        .detail-logo{
          font-size:15px;
          color:#777;
          display: flex;
          align-items: center;
          img{
            width: 18px;height: 18px;
            padding-right: 5px;
          }
        }
        .detail-tag{
          padding-bottom: 15px;
          span{
            display: inline-block;
            min-width: 50px;
            padding: 0 5px;
            text-align: center;
            font-size: 10px; /* 20/40 */
            line-height: 18px;
            border-radius: 4px;
            color: @badge-color;
            border: 1px solid @badge-color;
            box-sizing: border-box;
          }
          span+span{
            margin-left: 7px; /* 10/40 */
          }
          .m-noprice{
            background: #dea34c;
            color:white;
            border: 1px solid #dea34c;
            // font-size:12px;
            // padding: 2px 5px;
            // margin-left: 5px;
            // border-radius: 3px;
          }
        }
      }
      .detail-btns{
        display: flex;
        justify-content: flex-end;
        flex: 1;
        margin-top: 15px;
        .detail-btn{
          // margin-left: 18px; /* 36/40 */
          i{
            display: inline-block;
            width: 20px;
            height: 20px;
          }
          img{
            width: 18px; /* 36/40 */
            vertical-align: initial;
          }
        }
        .attention-btn img{
          width: 20px;
        }
      }
    }
    .detail-infos{
      display: flex;
      padding: 12px 0; /* 25/40 */
      margin-bottom: 6px;
      font-size: @font-size-13; /* 26/40 */
      line-height: 1.5;
      text-align: center;
      color: #777;
      background: #fff;
      .info-cell{
        flex: 1;
        &:first-of-type{
          border-right: 1px solid #f4f4f4;
        }
      }
    }
    .housing-title{
      padding-left: 12px;
      margin-left: -15px;
      line-height: 1.25;
      font-size: 20px;
      margin-bottom: 25px;
      color: #000;
      border-left: 3px solid #ff9600;
      // font-weight: bold;
      &:nth-of-type(1) {
        margin-bottom: 20px;
      }
    }
    .housing-table{
      display: flex;
      flex-wrap: wrap;
      margin-top: 5px; /* 5/20 */
      font-size: 14px; /* 14/20 */
      line-height: 1.5;
      color: #777;
      .housing-item{
        width: 50%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        span{
          color: #000;
        }
        &.width-33{
          width: 33%;
          padding-left: 18px;
          background: url('../../images/rent/true.png') left no-repeat;
          background-size: 12px 12px;
          box-sizing: border-box;
        }
      }
      .width-100{
        width: 100%;
      }
    }
    .houseMap{
      height: 180px;
      margin: 0 -15px;
    }
    .housing-intro{
      font-size: @font-size-13;
      color: #777;
    }
    .detail-foot{
      height: 45px;
      background: #fff;
    }
    .foot-bar{
      display: flex;
      justify-content: space-between;
      text-align: center;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 45px;
      background: #fff;
      .foot-btn{
        flex: 1;
        color: @theme-button-cancel-font-color;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #777;
        box-sizing: border-box;
      }
      .border-top{
          border-top: 1px solid #f4f4f4;
      }
      .sign-btn{
        background: #ff9600;
        color: #fff;
      }
    }
    .contact{
      position: fixed;
      right: 15px;
      bottom: 60px;
      width: 64px;
      height: 71px;
      background: url('../../images/rent/detail_lx.png') center no-repeat;
      background-size: cover;
    }
  }
  .info-content{
    color: #000;
    font-size: 20px;
  }
</style>
<style lang="less">
  @import "../../styles/baseVar.less";

  #detail-wrap{
    .detail-address{
      color: @color-999999;
      background: #fff;
      .weui-cell__hd{
        line-height: 1;
      }
      .location{
        width: 12px; /* 24/40 */
        height: 15px; /* 30/40 */
        margin-right: 15px; /* 30/40 */
      }

      .weui-cells{
        margin-top: 0;
        font-size: @font-size-15; /* 30/40 */
      }
      .vux-label{
        width: 15rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .detail-banner{
      .vux-icon-dot{
        background: rgba(0, 0, 0, .2);
        &.active{
          background: #fff;
        }
      }
    }
  }

</style>

<style lang='less'>

  #detail-wrap{
    .weui-btn{
      border-radius: 0;
    }
    .housing-link{
      background: #fff;
      .weui-cells{
        margin-top: 0;
        &:before{
          display: none;
        }
        &:after{
          background: #f4f4f4;
          border-color: #f4f4f4;
        }
        .weui-cell:before{
          border-color: #f4f4f4;
        }
        .vux-label{
          font-size: 14px;
          color: #585858;
        }
        .weui-cell__ft{
          font-size: 14px;
          color: #777;
        }
      }
    }
  }
</style>
<style lang="less" scoped>
 ol {
  background: white;
        padding-left: 18px;
        font-size: 13px;
        line-height: 1.8;
        li {
          list-style: decimal;
          list-style-position: outside;
        }
      }
</style>
